<script setup lang="ts">
import { reactive, onMounted, nextTick } from "vue";
import { getVideoList } from "@/network/api";
import router from "@/router";

let data = reactive({
  activateItem: 1,
  videolist: [] as any,
  iconType: true,
});

const activate = (item: any) => {
  data.activateItem = item.id
  data.iconType = false
  let dom = document.getElementById(item.id + '') as any
  if (dom) {
    const load = dom.load()
    const play = dom.play()
    load()
    play()
  }
}

const Back = () => {
  data.videolist.map((res:any,index:any) => {
    if(res.id == data.activateItem){
      if(index == 0){
        activate(data.videolist[data.videolist.length - 1])
      }else {
        activate(data.videolist[index - 1])
      }
    }
  })
}

const next = () => {
  data.videolist.map((res:any,index:any) => {
    if(res.id == data.activateItem){
      if(index == 6){
        activate(data.videolist[0])
      }else {
        activate(data.videolist[index + 1])
      }
    }
  })
}


const bofang = () => {
  data.iconType = false
  let dom = document.getElementById(data.activateItem + '') as any
  if (dom) {
    const load = dom.load()
    const play = dom.play()
    load()
    play()
  }
}

onMounted(() => {
  getVideoList().then(res => {
    data.videolist = res.data
    data.activateItem = res.data[0].id
  })
});
</script>

<template>
  <div class="video">

    <video loop :poster="item.cover_image" :show-center-play-btn="false" v-for="item in data.videolist" :muted="!(data.activateItem == item.id)"
      :style="{ zIndex: data.activateItem == item.id ? 999 : -1 }" preload="none" autoplay :src="item.url" :id="item.id">
    </video>

    <div style="width: 100%;height: 100%;" @click="bofang">
      <i v-if="data.iconType" @click="bofang" class="iconfont icon-bofang" style="color: #fff;font-size: 4vw;"></i>
    </div>

    <div v-if="!data.iconType" class="icon_l" @click="Back">
        <el-icon color="#fff" :size="25"><ArrowLeft /></el-icon>
    </div>
    <div v-if="!data.iconType" class="icon_r" @click="next">
      <el-icon color="#fff"  :size="25"><ArrowRight /></el-icon>
    </div>


    <div class="btn">
      <div class="listItem">
        <div class="item" :class="data.activateItem == item.id ? 'activate' : ''" v-for="item in data.videolist"
          :key="item" @click="activate(item)">
          <img :src="item.cover_image" />
          <div class="text">{{ item.name }}</div>
        </div>
      </div>
      <!-- <div class="icon">
        <div class="item">
          <img src="@/assets/img/cjxz.png" />
          <div>场景选择</div>
        </div>
        <div class="item" @click="handleGoEcology">
          <img src="@/assets/img/cyxq.png" />
          <div>产业详情</div>
        </div>
        <div class="item">
          <img src="@/assets/img/jdjs.png" />
          <div>基地介绍</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");

body,
html {
  overflow: hidden;
}

.d_none {
  display: none;
}

.iconfont {
  position: fixed;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  z-index: 99999;
  -webkit-text-stroke: 2px #586887;
}

.icon_l {
  position: fixed;
  left: 0%;
  top: 50%;
  transform: translate(50%, -50%);
  z-index: 99999;
  -webkit-text-stroke: 2px #586887;
}

.icon_r {
  position: fixed;
  right: 0%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  -webkit-text-stroke: 2px #586887;
}

.video {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  overflow-y: hidden;
  overflow-x: hidden;


  video {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 100%;
  }

  .btn {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 9999;

    .listItem {
      height: 100%;
      // height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;

      .activate {
        border: 2px solid #fff !important;
      }

      .item {
        border: 2px solid rgba(22, 22, 22, 0);
        box-sizing: content-box;
        height: 60px;
        width: 60px;
        border-radius: 5px;
        margin: 0 7px;
        position: relative;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .text {
          position: absolute;
          bottom: 0;
          right: 0;
          text-align: center;
          left: 0;
          background-color: rgba(0, 0, 0, 0.5);
          padding: 3px 0;
          color: #fff;
        }
      }
    }

    .icon {
      display: flex;
      justify-content: center;

      .item {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin: 0 30px;
        color: #fff;

        img {
          width: 30px;
          margin-bottom: 8px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
.video {
  .btn {
    display: none;
  }
}
}
</style>
